import QtQuick 1.0

Rectangle {
    id: footerButton

    property alias buttonWidth: footerButton.width
    property alias buttonText: footerButtonText.text
    property alias buttonState: footerButton.state
    signal activated

    height: 52
    color: "#00B6D051"
    radius: 15

    MouseArea { anchors.fill: parent }

    BorderImage {
        id: buttonBorder
        source: "../images/Button_default.png"
        anchors.fill: parent
        width: parent.width; height: parent.height
        border.left: 20; border.top: 20
        border.right: 20; border.bottom: 20
        horizontalTileMode: BorderImage.Stretch
        verticalTileMode: BorderImage.Stretch
    }

    Text {
        id: footerButtonText
        anchors.fill: parent
        font.family: nokiaStandard.name
        font.pixelSize: 22
        color: "#000000"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        elide: Text.ElideRight
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //parent.color = "red"
            //mainContainer.state = "shoppingListState"
            parent.activated()
        }
        onPressed: {
            buttonBorder.source = "../images/Button_active2.png";
            footerButtonText.color = "#FFFFFF"
        }
        onReleased: {
            buttonBorder.source = "../images/Button_default.png";
            footerButtonText.color = "#000000"
        }

    }

    states: [
        State {
            name: "normal";
            PropertyChanges { target: footerButtonText; color: "#000000" }
        },
        State {
            name: "disabled";
            PropertyChanges { target: footerButtonText; color: "#acacac" }
        }
    ]
}

